<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          left-text="返回"
          title="订单详情"
          left-arrow
          @click-left="goBack"
        />
      </van-sticky>
    </div>

    <!-- 内容展示区 -->
    <div class="data">
      <!-- 下单商品 -->
      <div
        style="
          font-size: 20px;
          margin-left: 10px;
          margin-top: 10px;
          font-weight: bold;
        "
      >
        <van-icon name="bag-o" />下单商品
      </div>

      <!-- 订单商品详情 -->
      <div class="up">
        <van-card
          v-for="item in orderDataById.orderLines"
          :key="item.product.id"
          :desc="item.product.description"
          :price="item.price + '.00'"
          :title="item.name"
          :thumb="item.photo"
          :num="item.num"
        />
      </div>

      <!-- 总价 -->
      <div class="total">
        <span
          class="totalText"
          style="color: red; font-size: 20px; font-weight: bold"
          >总价：<span>{{ orderDataById.total }}元</span></span
        >
        <div class="paybutton" v-if="orderDataById.status == '待支付'">
          <van-button
            color="linear-gradient(to right, #7232dd, #8d60da)"
            size="small"
            @click="payOrder"
          >
            支付订单
          </van-button>
        </div>
      </div>

      <!-- 订单详情 -->
      <div class="bottom">
        <div
          style="
            font-size: 20px;
            margin-left: 10px;
            margin-top: 10px;
            font-weight: bold;
          "
        >
          <van-icon name="description" />订单信息
        </div>
        <!-- 分接线 -->
        <div class="null"></div>

        <div class="left">
          <van-icon name="idcard" />订单编号:
          <span class="right">{{ orderDataById.id }}</span>
        </div>
        <div class="left">
          <van-icon name="notes-o" />订单状态:
          <span class="right" style="color: blue">{{
            orderDataById.status
          }}</span>
        </div>
        <div class="left">
          <van-icon name="user-circle-o" />收货人:
          <span class="right">张晓明1</span>
        </div>
        <div class="left">
          <van-icon name="phone-circle-o" />收货人电话:
          <span class="right">155788424956</span>
        </div>
        <div class="left">
          <van-icon name="location-o" />收货地址:
          <span class="right">上海市-市辖区-黄浦区-88号</span>
        </div>
        <div class="left">
          <van-icon name="edit" /> 买家留言:
          <span class="right">{{ orderDataById.buyerMessage }}</span>
        </div>
        <div class="left">
          <van-icon name="underway-o" /> 订单时间:
          <span class="right">{{
            moment(orderDataById.orderTime).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </div>
      </div>
    </div>

    <!-- 底部步骤条 -->
    <div class="footer" style="margin-top: 10px">
      <div v-if="orderDataById.status === '待支付'">
        <van-steps direction="vertical" :active="0">
          <van-step>
            <h3>待支付</h3>
          </van-step>
          <van-step>
            <h3>待派送</h3>
          </van-step>
          <van-step>
            <h3>派送中</h3>
          </van-step>
          <van-step>
            <h3>待评价</h3>
          </van-step>
          <van-step>
            <h3>已完成</h3>
          </van-step>
        </van-steps>
      </div>
      <div v-else-if="orderDataById.status === '待派送'">
        <van-steps direction="vertical" :active="1">
          <van-step>
            <h3>待支付</h3>
          </van-step>
          <van-step>
            <h3>待派送</h3>
          </van-step>
          <van-step>
            <h3>派送中</h3>
          </van-step>
          <van-step>
            <h3>待评价</h3>
          </van-step>
          <van-step>
            <h3>已完成</h3>
          </van-step>
        </van-steps>
      </div>
      <div v-else-if="orderDataById.status === '派送中'">
        <van-steps direction="vertical" :active="2">
          <van-step>
            <h3>待支付</h3>
          </van-step>
          <van-step>
            <h3>待派送</h3>
          </van-step>
          <van-step>
            <h3>派送中</h3>
          </van-step>
          <van-step>
            <h3>待评价</h3>
          </van-step>
          <van-step>
            <h3>已完成</h3>
          </van-step>
        </van-steps>
      </div>
      <div v-else-if="orderDataById.status === '待评价'">
        <van-steps direction="vertical" :active="3">
          <van-step>
            <h3>待支付</h3>
          </van-step>
          <van-step>
            <h3>待派送</h3>
          </van-step>
          <van-step>
            <h3>派送中</h3>
          </van-step>
          <van-step>
            <h3>待评价</h3>
          </van-step>
          <van-step>
            <h3>已完成</h3>
          </van-step>
        </van-steps>
      </div>
      <div v-else-if="orderDataById.status === '已完成'">
        <van-steps direction="vertical" :active="5">
          <van-step>
            <h3>待支付</h3>
          </van-step>
          <van-step>
            <h3>待派送</h3>
          </van-step>
          <van-step>
            <h3>派送中</h3>
          </van-step>
          <van-step>
            <h3>待评价</h3>
          </van-step>
          <van-step>
            <h3>已完成</h3>
          </van-step>
        </van-steps>
      </div>
    </div>

    <!-- 底部边距 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapActions, mapState } from "vuex";
var moment = require("moment");
export default {
  data() {
    return {};
  },

  created() {
    this.getOrderData();
  },

  methods: {
    moment,
    ...mapActions("productOrder", ["getOrderDataByIdVuex", "payOrderVuex"]),
    // 通过id查询到相应订单数据
    getOrderData() {
      let param = {
        id: this.$route.query.id,
      };
      this.getOrderDataByIdVuex(param);
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 支付订单
    payOrder() {
      let param = {
        id: this.$route.query.id,
      };
      this.payOrderVuex(param).then((s) => {
        if (s == 200) {
          Toast.success("支付成功！");
        } else { 
          Toast.fail("余额不足，请充值！");
        }
      });
      let t;
      clearTimeout(t);
      t = setTimeout(this.$router.go(0), 1500);
       },
  },

  computed: {
    ...mapState("productOrder", ["orderDataById"]),
    ...mapState("productOrder", ["payOrderMeg"]),
  },
};
</script>

<style scoped>
.bottom {
  background-color: rgba(245, 245, 245, 0.5);
  height: 285px;
}
.null {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  height: 2px;
  background-color: rgb(224, 224, 224);
}
.left {
  margin-left: 17px;
  margin-top: 13px;
  margin-right: 10px;
}
.right {
  font-size: 13px;
}
.footer {
  position: relative;
}
.button {
  position: absolute;
  right: 20px;
  top: 10px;
}
.total {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  height: 35px;
}
.totalText {
  position: absolute;
  left: 10px;
  top: 5px;
}
.paybutton {
  position: absolute;
  right: 20px;
  bottom: 2px;
}
</style>